<template>
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    background="#FF6E8F"
    class="inp"
  >
    <template #left>
      <div class="left" @click="fun">&lt;</div>
    </template>
    <template #action>
      <div class="right" @click="onClickButton">搜索</div>
    </template>
  </van-search>
  <div class="box">
    <img src="../img/加载/car.png" alt="没有找到你搜索的商品" />
    <p>貌似什么都没搜到<br />换个关键词试试看呢！？</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ExchangeInfo } from "../stores/ExchangeOrder";
import { search } from "../api/index";
import { showDialog } from "vant";
const stores = ExchangeInfo();
const value = ref();
const router = useRouter();
const fun = () => {
  // 返回上一级
  router.go(-1);
};



// 点击搜索
const onClickButton = (val2) => {
  val2 = value.value;


  if (val2 == "") {
    showDialog({
      message: "你没有输入内容",
    }).then(() => {
      // on close
    });
    return;
  }
  search(val2).then((res) => {
    stores.searchData = res.data.data.goodsList;
    if (stores.searchData == null && stores.searchData1 == null) {
      router.push("/SearchNoGoods");
    } else {
      router.push({
        path: "/SearchGoods",
        query: {
          val: val2,
        },
      });
    }
  });

   search(val2).then((res) =>{
      stores.searchData1 = res.data.data.garbageTypeList
      if (val2 == "" || stores.searchData1 == null && stores.searchData == null) {
      router.push("/SearchNoGoods");
    } else {
      router.push({
        path: "/SearchGoods",
        query: {
          val: val2,
        },
      });
    }
  });
};
// 点击历史删除
const Delete = () => {
  window.localStorage.removeItem("List");
  location.reload();
};
</script>

<style lang="less" scoped>
.box {
  width: 36.667vw;
  margin: 10.667vw auto;
  img {
    width: 100%;
  }
  p {
    text-indent: 6.4vw;
    font-size: 1.2vw;
    color: #999999;
  }
}

.left {
  color: #fff;
  font-size: 6.333vw;
  margin-right: 3.333vw;
}
.van-search__content {
  border-radius: 6.667vw;
}
.right {
  background-color: #fff;
  color: #2bcddd;
  border-radius: 6.667vw;
  width: 60px;
  text-align: center;
  font-size: 2.133vw;
}
</style>
